@extends('layout.ionic')

@section('title', '维护功能')

@section('content')

    <style>
        .my-icon:before
        {
            font-size:55px;
        }
        .my-button{
            width:80%;
        }
        .my-iconfont
        {
            color: #09bb07;
        }

    </style>
    <div class="weui-tab" id="page">
        <!--BEGIN toast-->
        <div id="success" style="display:none;" v-show="success_show">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">@{{ msg }}</p>
            </div>
        </div>
        <!--end toast-->

        <!-- loading toast -->
        <div id="loading" style="display:none;" v-show="loading_show">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast" style="margin-bottom: 10px;"></i>
                <p class="weui-toast__content">数据加载中</p>
            </div>
        </div>
        <div id="info" style="display:none;" v-show="info_show">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-info my-icon weui-icon_toast"></i>
                <p class="weui-toast__content">@{{ info }}</p>
            </div>
        </div>
        <div id="warn" style="display:none;" v-show="warn_show">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-warn my-icon weui-icon_toast"></i>
                <p class="weui-toast__content">@{{ warn }}</p>
            </div>
        </div>
        <div class="weui-tab__panel" style="display:none;" v-show="sections[0].status">
            <div class="weui-cells weui-cells_form">

                <div class="weui-cell weui-cell_select weui-cell_select-after">
                    <div class="weui-cell__hd">
                        <label for="" class="weui-label">平台</label>
                    </div>
                    <div class="weui-cell__bd">
                        <select id="platform" class="weui-select" name="platform" v-model="platform" style="padding-left: 0">
                            <option value="">请选择</option>
                            <option value="0">手提电脑</option>
                            <option value="1">台式电脑</option>
                            <option value="2">手机</option>
                        </select>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">长号</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" name="cellphone" v-model="cellphone" placeholder="13800138000">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">短号</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" name="shortphone" v-model="shortphone" placeholder="选填">
                    </div>
                </div>
                <div class="weui-cell" id="address">
                    <div class="weui-cell__hd"><label class="weui-label">地址</label></div>
                    <div class="weui-cell__hd">
                        <input class="weui-input" id="address" name="address" v-model="address" type="text" placeholder="c4-567" v-show="!readOnly">
                        <div class="weui-input" id="address2" v-show="readOnly">B5-101实验室</div>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label for="" class="weui-label">维修日期</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="date" name="ordertime" v-model="ordertime" value="">
                    </div>
                </div>
                <div class="weui-cell weui-cell_select weui-cell_select-after">
                    <div class="weui-cell__hd">
                        <label for="" class="weui-label">时段</label>
                    </div>
                    <div class="weui-cell__bd">
                        <select id="platform" class="weui-select" name="schedule" v-model="schedule" style="padding-left: 0">
                            <option value="">请选择</option>
                            @foreach($schedules as $schedule)
                                <option value="{{ $schedule->id }}">{{ $schedule->content }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="weui-cells__title">问题描述</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" name="description" v-model="description" placeholder="我需要重装系统！" rows="3" ></textarea>
                        <div class="weui-textarea-counter"><span>@{{ description.length }}</span>/200</div>
                    </div>
                </div>
            </div>
            <br>
            <a href="javascript:;" class="weui-btn weui-btn_primary my-button" v-on:click="submitRepair">提交</a>
            <br>
            <br>
        </div>
        <div class="weui-tab__panel" v-show="sections[1].status">
            <div class="js_dialog" style="display:none;" v-show="cancel_dialog" style="opacity: 1;">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__hd"><strong class="weui-dialog__title">关闭预约</strong></div>
                    <div class="weui-dialog__bd">如果你已不需要预约或想重新预约请在未被接单请前关闭喔！</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" v-on:click="changeCancel">取消</a>
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" v-on:click="submitCancel">关闭预约</a>
                    </div>
                </div>
            </div>
            {{--<div class="js_dialog" id="iosDialog1" style="opacity: 1;">--}}
            {{--<div class="weui-mask"></div>--}}
            {{--<div class="weui-dialog">--}}
            {{--<div class="weui-dialog__hd"><strong class="weui-dialog__title">完成预约</strong></div>--}}
            {{--<div class="weui-dialog__bd">如果维护完成，请及时点击完成，我们的维护人员才能完成任务喔！</div>--}}
            {{--<div class="weui-dialog__ft">--}}
            {{--<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>--}}
            {{--<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">完成预约</a>--}}
            {{--</div>--}}
            {{--</div>--}}
            {{--</div>--}}
            <br>
            <div class="page__bd">
                @if($repairs)
                    @if($repairs->count() == 0)
                        <div style="color: #8d8d8d;text-align: center;margin: 150px 0;">
                            没有预约记录
                        </div>
                    @endif
                    @foreach($repairs as $repair)
                        <div class="weui-form-preview">
                            <div class="weui-form-preview__hd">
                                <div class="weui-form-preview__item">
                                    <label class="weui-form-preview__label">
                                        @if($repair->platform == 0)
                                            {{ '笔记本电脑' }}
                                        @elseif($repair->platform == 1)
                                            {{ '台式电脑' }}
                                        @else
                                            {{ '手机' }}
                                        @endif
                                    </label>
                                    <em class="weui-form-preview__value">
                                        @if($repair->status == 0)
                                            {{ '未跟进' }}
                                        @elseif($repair->status == 1)
                                            {{ '已联系' }}
                                        @elseif($repair->status == 2)
                                            {{ '已解决' }}
                                        @elseif($repair->status == -1)
                                            {{ '已取消' }}
                                        @else
                                            {{ '无法解决' }}
                                        @endif
                                    </em>
                                </div>
                            </div>
                            <div class="weui-form-preview__bd">
                                <div class="weui-form-preview__item">
                                    <label class="weui-form-preview__label">预约地址</label>
                                    <span class="weui-form-preview__value">{{ $repair->dormitory_address?$repair->dormitory_address:'B5-101实验室' }}</span>
                                </div>
                                <div class="weui-form-preview__item">
                                    <label class="weui-form-preview__label">预约时间</label>
                                    <span class="weui-form-preview__value">{{ $repair->order_time }}</span>
                                </div>
                                <div class="weui-form-preview__item">
                                    <label class="weui-form-preview__label">时段</label>
                                    <span class="weui-form-preview__value">{{ $repair->schedule->content }}</span>
                                </div>
                                <div class="weui-form-preview__item">
                                    <label class="weui-form-preview__label">问题描述</label>
                                    <span class="weui-form-preview__value">{{ $repair->description }}</span>
                                </div>
                            </div>
                            <div class="weui-form-preview__ft">
                                <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:" v-if="!{{ $repair->status }}" v-on:click="changeCancel({{ $repair->id }})">操作</a>
                            </div>
                        </div>
                        <br>
                    @endforeach
                @endif
            </div>
        </div>
        <div class="weui-tab__panel" style="display:none;" v-show="sections[2].status">
            <div class="weui-cells__title">问题反馈</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" name="content" v-model="feedback" placeholder="你的意见或建议" rows="3" ></textarea>
                        <div class="weui-textarea-counter"><span>@{{ feedback.length }}</span>/200</div>
                    </div>
                </div>
            </div>
            <br>
            <a href="javascript:;" class="weui-btn weui-btn_primary my-button" v-on:click="submitFeedback">提交</a>

            <div class="weui-cells__title">如有问题请联系</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>乔鹏</p>
                    </div>
                    <div class="weui-cell__ft"><a href="tel:17728031141" >17728031141</a></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>邵逸思</p>
                    </div>
                    <div class="weui-cell__ft"><a href="tel:671019" >671019</a> / <a href="tel:13527741019" >13527741019</a></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>王桦迎</p>
                    </div>
                    <div class="weui-cell__ft"><a href="tel:663348" >663348</a> / <a href="tel:13570373348" >13570373348</a></div>
                </div>
            </div>
        </div>
        <div class="weui-tabbar">
            <a href="javascript:;" class="weui-tabbar__item" v-bind:class="sections[0].status?'weui-bar__item_on':''" v-on:click="changeBar(0)">
                <i class="iconfont" v-bind:class="sections[0].status?'my-iconfont':''">&#xe603;</i>
                <div class="weui-tabbar__label">预约</div>
            </a>
            <a href="javascript:;" class="weui-tabbar__item" v-bind:class="sections[1].status?'weui-bar__item_on':''" v-on:click="changeBar(1)">
                <i class="iconfont" v-bind:class="sections[1].status?'my-iconfont':''">&#xe606;</i>
                <div class="weui-tabbar__label">我的预约</div>
            </a>
            <a href="javascript:;" class="weui-tabbar__item" v-bind:class="sections[2].status?'weui-bar__item_on':''" v-on:click="changeBar(2)">
                <i class="iconfont" v-bind:class="sections[2].status?'my-iconfont':''">&#xe604;</i>
                <div class="weui-tabbar__label">问题反馈</div>
            </a>
        </div>
    </div>

@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.1/vue-resource.min.js"></script>
    {{--<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>--}}
    {{--<script type="text/javascript">--}}
    {{--$(function(){--}}
    {{--$('.weui-tabbar__item').on('click', function () {--}}
    {{--$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');--}}
    {{--});--}}
    {{--});--}}
    {{--</script>--}}
    <script>
        var success = new Vue({
            el: '#page',
            data: {
                success_show: false,
                loading_show: false,
                info_show: false,
                warn_show: false,

                sections:[
                    {id: 0, status: false},
                    {id: 1, status: true},
                    {id: 2, status: false},
                ],

                cancel_dialog: false,

                repair_id: 0,

                msg: '',
                info: '',
                warn: '',

                platform: '',
                cellphone: '',
                shortphone: '',
                address: '',
                ordertime: '',
                schedule: '',
                description: '',

                feedback: '',


            },
            methods:{
                changeBar: function (id) {
                    this.sections.forEach(function (section) {
                        if(section.id != id){
                            section.status = false;
                        }else{
                            section.status = true;

                        }
                    });
                },
                submitRepair: function () {
                    if(this.platform == ''){
                        this.infoToast('请选择平台');
                        return;
                    }
                    if(this.cellphone == ''){
                        this.infoToast('请填写长号');
                        return;
                    }
                    if(this.platform == '1' && this.address == ''){
                        this.infoToast('请填写地址');
                        return;
                    }
                    if(this.ordertime == ''){
                        this.infoToast('请选择日期');
                        return;
                    }
                    if(this.schedule == ''){
                        this.infoToast('请选择时段');
                        return;
                    }
                    if(this.description == ''){
                        this.infoToast('请填写描述');
                        return;
                    }

                    var d = new Date();
                    var date = d.getFullYear()+"-"+((d.getMonth()+1)<10?"0":"")+(d.getMonth()+1)+"-"+(d.getDate()<10?"0":"")+d.getDate();
                    if(this.ordertime < date){
                        this.infoToast('日期预约当天或之后');
                        return;
                    }

                    var patternPhone = /^(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}$|^170[059]\d{7}$/;
                    if(!patternPhone.test(this.cellphone)){
                        this.infoToast('长号不正确');
                        return;
                    }

                    var patternShortPhone = /^[5-8][0-9]{2,5}$/
                    if(this.shortphone != '' && !patternShortPhone.test(this.shortphone) ){
                        this.infoToast('短号不正确');
                        return;
                    }



                    this.loading_show = !this.loading_show;
                    Vue.http.post("{{ route('addrepair') }}", {
                        platform: this.platform,
                        cellphone: this.cellphone,
                        shortphone: this.shortphone,
                        address: this.address,
                        ordertime: this.ordertime,
                        schedule: this.schedule,
                        description: this.description,
                        _token : '{{csrf_token()}}'
                    }).then(function(response){

                        success.loading_show = !success.loading_show;

                        if(response.body.msg == 'ok'){
                            success.msg = '预约成功';
                            success.success_show = !success.success_show;
                            setTimeout(function () {
                                success.success_show = !success.success_show;
                                window.location.href = response.body.target + "?msg=ok";
                            }, 2000);
                            return;
                        }

                        success.warn_show = !success.warn_show;
                        success.warn = response.body.msg;
                        setTimeout(function () {
                            success.warn_show = !success.warn_show;
                        }, 2000);

                    });
                },
                submitCancel: function () {
                    this.changeCancel();
                    this.loading_show = !this.loading_show;
                    Vue.http.post("{{ route('cancelrepair') }}", {
                        id: success.repair_id,
                        _token : '{{csrf_token()}}'
                    }).then(function(response){

                        success.loading_show = !success.loading_show;

                        if(response.body.msg == 'ok'){
                            success.msg = '关闭成功';
                            success.success_show = !success.success_show;
                            setTimeout(function () {
                                success.success_show = !success.success_show;
                                window.location.href = response.body.target + "?msg=ok";
                            }, 2000);
                            return;
                        }

                        success.warn_show = !success.warn_show;
                        success.warn = response.body.msg;
                        setTimeout(function () {
                            success.warn_show = !success.warn_show;
                        }, 2000);

                    });
                },
                submitFeedback: function () {
                    if(this.feedback == ''){
                        this.infoToast('意见或建议呢');
                        return;
                    }
                    this.loading_show = !this.loading_show;
                    Vue.http.post("{{ route('addfeedback') }}", {
                        content: this.feedback,
                        _token : '{{csrf_token()}}'
                    }).then(function(response){

                        success.loading_show = !success.loading_show;

                        if(response.body.msg == 'ok'){
                            success.msg = '反馈成功';
                            success.success_show = !success.success_show;
                            setTimeout(function () {
                                success.success_show = !success.success_show;
                                window.location.href = response.body.target + "?msg=ok";
                            }, 2000);
                            return;
                        }

                        success.warn_show = !success.warn_show;
                        success.warn = response.body.msg;
                        setTimeout(function () {
                            success.warn_show = !success.warn_show;
                        }, 2000);

                    });
                },
                changeCancel: function (id) {
                    if(id != null)
                        this.repair_id = id;
                    this.cancel_dialog = ! this.cancel_dialog;
                },
                changeCancel2: function (my_object) {
                    my_object = ! my_object;
                },
                infoToast: function (info) {
                    this.info = info;
                    this.info_show = !this.info_show;
                    setTimeout(function () {
                        success.info_show = !success.info_show;
                    }, 1000);
                    return;
                }
            },
            computed: {
                readOnly: function () {
                    if(this.platform != '1'){
                        return true;
                    }
                    return false;
                }
            }

        });
    </script>
@endsection

